<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>The Andela Institute</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/main.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="css/animate.css">
    <link rel="stylesheet" type="text/css" href="css/seun.css">
    <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,900,700italic|Dosis:300,400,600,700|Lato:300,400,700,900' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="css/header.css">
    <link rel="stylesheet" type="text/css" href="css/images.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body data-spy="scroll" data-target="#navbar" data-offset="0">

    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <!-- <div class="container-fluid"> -->
        <div class="my_wrapper">
            <div class="navbar-inner">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                  <a class="navbar-brand" href="#">
                       <img src="img/logo.png">
                       <strong>Andela Institute</strong>
                   </a>
                </div>

                <div>
                    <span class="collapse navbar-collapse" style="height: auto;">
                        <ul class="nav navbar-nav pull-right">
                            <li class="active"><a href="#top">Home</a></li>
                            <li><a href="#about">About</a></li>
                            <li><a href="#mean_stack">MEAN Stack</a></li>
                            <li><a href="#andela_fellow">Andela Fellow</a></li>
                            <li><a href="#apply">Apply</a></li>
                        </ul>
                    </span>  
                </div>
            </div>
        </div>
    </nav>
    <!-- Header(first page) -->
    <header id="top" class="header">
        <div class="text-vertical-center">
            <div class="header_container">
                <div class="logo">
                    <img src="img/andela_institute_logo.png">
                    <div class="tag_line">Tapping into brilliance</div>
                </div>
            </div>
        </div>
    </header>

<section id="about" class="about">
    <div class="my_wrapper">
    <div class="container-fluid">
        <div class="row">
            <h2>About Andela</h2>
            <div class="row">
                <div class="col-sm-4 col-md-4 col-lg-4">
                    <div class="card cardbox">
                       <div class="image-wrapper">
                          <img src="img/target.png" />
                        </div>
                        <div class="card-body">
                            <div class="card-content">
                               <h3 class="main">Our Mission</h3>
                               <p>Our mission is to equip youths around the world to be great developers.</p>
                               
                            </div>
                            <div class="read-more text-center">
                                <a  href="#" class="blue-btn-custom btn-sm">Read more</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4 col-md-4 col-lg-4">
                    <div class="card cardbox">
                       <div class="image-wrapper">
                          <img src="img/team128.png" />
                        </div>
                        <div class="card-body">
                            <div class="card-content">
                               <h3 class="main">Meet the team</h3>
                               <p>The Andela team is the best team in the world. They are organized, passionate about what they do.</p>
                                
                            </div>
                            <div class="readMore text-center">
                                <a  href="#" class="blue-btn-custom btn-sm">Read more</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4 col-md-4 col-lg-4">
                    <div class="card cardbox">
                       <div class="image-wrapper">
                          <img src="img/network.png" />
                        </div>
                        <div class="card-body">
                            <div class="card-content">
                               <h3 class="main">The Andela Network</h3>
                               <p>Andela has a network of great minds and those that want to add to  in the world. Fnd out about it now.</p> 
                               
                            </div>
                            <div class="read-more text-center">
                                <a  href="#" class="blue-btn-custom btn-sm">Read more</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<section id="mean_stack" class="mean mean_stack fixed-bg-image">
    <div class="fixed-bg-div">
    <div class="my_wrapper">
        <div class="container-fluid">
            <div class="row">
                <h2>Mean Stack</h2>
                <div class="row">
                    <div class="col-sm-6 col-md-6 col-lg-6">
                        <div class="col_content">
                            <div>
                                <h3 class="main">Skill Focus</h3>
                                <p>The skills a man who learns Mean Stack would have</p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et interdum magna. Integer vel arcu at tellus ultrices commodo. Suspendisse cursus suscipit tortor ut lobortis. Vivamus sodales id erat vitae ultricies. </p> <p>Donec hendrerit orci at metus venenatis, vitae dictum enim viverra. Praesent non posuere mauris, nec pretium ante. Duis tincidunt justo quis diam fringilla, pellentesque ullamcorper massa elementum.</p>
                            </div>
                            <div class="readMore text-center">
                                <a  href="#" class="btn-plain btn-sm">Read more</a>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-6 col-md-6 col-lg-6">
                        <div class="col_content">
                            <div>
                                <h3 class="main">Training Timeline</h3>
                                <p>Fnd out how long will it take you to learn to use mean stack at Andela?</p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et interdum magna. Integer vel arcu at tellus ultrices commodo. </p>
                                <p>Suspendisse cursus suscipit tortor ut lobortis. Vivamus sodales id erat vitae ultricies. </p> <p>Donec hendrerit orci at metus venenatis, vitae dictum enim viverra. Praesent non posuere mauris, nec pretium ante. Duis tincidunt justo quis diam fringilla, pellentesque ullamcorper massa elementum.</p>
                            </div>
                            <div class="readMore text-center">
                                <a  href="#" class="btn-plain btn-sm">Read more</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</section>


<section id="andela_fellow" class="andela_fellow ">
    <div class="my_wrapper ">
        <div class="container-fluid">
            <div class="row">
                <h2 class="text-center">Who is an Andela Fellow</h2>
                <div class="row">
                    <div class="col-sm-6 col-md-6 col-lg-6">
                        <div class="card cardbox">
                            <div class="image-wrapper">
                              <img src="img/process.png" />
                            </div>
                            
                            <div class="card-content">
                               <h3 class="main">Selective/application process</h3>
                               <p>Lorem ipsum dolor sit amet, consect adipis elit. Praesent metus turpis, semper consec erat vitae, euismod tinci enim.</p> 
                               <p>Sed sed dui sed ante posuere vehic nec eu tortor. Maecen suscipit conseq lla a iaculis. Donec malesua vestib faucibus. Mauris in enim rhoncus, rhoncus turpis id, faucibus nibh.</p>
                            </div>
                            <div class="readMore text-center">
                                <a  href="#" class="btn btn-primary btn-sm">Read more</a>
                            </div>
                            
                        </div>
                    </div>
            
                    <div class="col-sm-6 col-md-6 col-lg-6">
                        <div class="card cardbox">
                            <div class="image-wrapper">
                              <img src="img/assessment.png" />
                            </div>

                            <div class="card-content">
                               <h3 class="main">Take Assessments</h3>
                               <p>You have in all 100 multiple choice question.</p>
                               <p>Sed sed dui sed ante posuere vehicula nec eu tortor. Maecenas suscipit consequat nulla a iaculis. Donec malesuada vestibulum faucibus. Mauris in enim rhoncus, rhoncus turpis id, faucibus nibh.</p>
                               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus turpis, semper consectetur erat vitae, euismod tincidunt enim.</p>
                            </div>

                            <div class="readMore text-center">
                                <a  href="#" class="btn btn-primary btn-sm">Read more</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<section id="apply"class="apply fixed-bg-apply">
  <div class="fixed-bg-divapply">
    <div class="my_wrapper">
       <div class="container-fluid">
          <div class="row">
              <div class="container-fluid">
                <h2 class="text-center">
                    Apply To be a Fellow
                </h2>
                <div class="row">
                  <div class="col-md-4 col-sm-6">
                    <div class="center">
                        <span class="icon"><img src="img/hourglass.png"></span>
                        <h4>Deadline</h4>
                        <p>The Andela team is the best team in the world. They are organized, passionate about what they do.</p> 
                    </div>
                    <div class="read-more text-center">
                        <a  href="#" class="blue-btn-custom btn-sm">Read more</a>
                    </div>
                  </div>
                  <div class="col-md-4 col-sm-6">
                    <div class="center">
                        <span class="icon"><img src="img/network.png"></span>
                        <h4>Andela Fellow Network</h4>
                        <p>yeuhud jsdhbkajaud hsabchcs bvdfsbdzcn
                            dfbksfbdsk bsdbk jsf j bvsn   ksbcjss dcs
                            dsbkv kjbdvksvk kjd
                        </p> 
                        <div class="read-more text-center">
                            <a  href="#" class="blue-btn-custom btn-sm">Read more</a>
                        </div>
                    </div>
                  </div>
                  <div class="col-md-4 col-sm-6">
                    <div class="center">
                        <span class="icon"><img src="img/apply.png"></span>
                        <h4>How It Can Change your  Life</h4>
                        <p>The Andela team is the best team in the world.
                            Be lhjhisdb hgwfiufefzjd mz ckajkafdkjbf hvdfjshdjs
                        </p> 
                        <div class="read-more text-center">
                             <a  href="#" class="blue-btn-custom btn-sm">Read more</a>
                        </div>
                    </div>
                  </div>
                </div>
            </div>
        </div>
      </div>
    </div>
 </div>
</section>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="row footer-col">
                <div class="footer-col1">
                    <div class="text-center">
                        <h4><strong>Andela Institute</strong>
                        </h4>
                    </div>
                    <div class="contact group">
                        <div class="col-md-4">
                            <div class="hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a">
                               <a href="#set-5" class="hi-icon hi-icon-location">Location</a>
                            </div>
                            <div class="footer-col-text">
                            <p>4 Connal Road<br>Herbert Macauley, Lagos Nigeria</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                          <div class="hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a">
                             <a href="#" class="hi-icon hi-icon-mobile">Partners</a>
                          </div>
                          <div class="footer-col-text">
                            <p>Phone Number:<br>(080) 848-67569</p>
                          </div>

                        </div>
                        <div class="col-md-4">
                            <div class="hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a">
                               <a href="#set-5" class="hi-icon hi-icon-mail">mail</a>
                            </div>
                            <div class="footer-col-text-bar-last">
                             <a href="mailto:name@example.com">info@andela.co</a>
                            </div>
                        </div>    
                    </div>
                    <div class= "footer_social-icons group text-center">
                      <hr class="small">
                        <ul class="list-inline">
                            <li>
                                <a href="#"><i class="fa fa-facebook fa-fw fa-3x"></i></a>
                            </li>
                            <li>
                                <a href="https://twitter.com/ThisIsAndela"><i class="fa fa-twitter fa-fw fa-3x"></i></a>
                            </li>
                        </ul>
                        <hr class="small">
                        <p class="text-center">Copyright &copy;Andela Institute 2014</p>

                    </div>
                </div>
            </div>
        </div>

    </footer>


    <!-- jQuery Version 1.11.0 -->
    <script src="js/jquery-1.11.0.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Smooth Scrolling Javascript -->
    <script src="js/app.js"></script> 
    <!-- for the footer icons -->
    <script src="js/modernizr.js"></script>
</body>

</html>
